<template>
  <ScaleScreen
    :width="1920"
    :height="1080"
    class="scale-wrap"
    :selfAdaption="$store.state.setting.isScale"
  >
    <div class="bg">
      <!-- MP4 动态背景视频 -->
      <video
        autoplay
        muted
        loop
        class="background-video"
        src="http://123.57.159.163/qx1datav/cockpit/background.mp4"
      ></video>

      <img class="background-image" :src="bgImage" alt="background" />

      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center title_wrap">
          <div class="timers">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</div>
        </div>
        <router-view></router-view>
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
</template>

<script>
import { formatTime } from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";

export default {
  components: { Setting, ScaleScreen },
  data() {
    return {
      isJscActive: true,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      // 静态图片背景
      bgImage: require("../assets/img/assess/assessBg.png"),
    //   // 动态视频背景
    //   bgVideo: require("../assets/mp4/background.mp4"),
    };
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss">
@import "./home.scss";

// 添加视频样式
.bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; // 图片在视频下层，作为备用
}

.host-body {
  position: relative;
  z-index: 1;
}
</style>
